@extends('layouts.admin')
@section('style')
@endsection
@section('content')
    <div class="admin_main">
        <div class="admin_header_fixed">
            <div class="admin_header clearfix">
                <div class="title"><i></i>编辑权限节点</div>
                <div class="action">
                    <b></b>
                    <div class="layui-btn-group layui-btn-group-only">
                        <a class="layui-btn layui-btn-primary layui-btn-small " href="{{ url('permission') }}">
                            <i class="fa fa-reply"></i> 返回列表</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="admin_base">
          <div class="box_form">
            <div class="box_content">
              <form method="post" action="{{ url('permission/'.$id) }}"  id="menuForm" enctype="multipart/form-data"  class="MainForm layui-form layui-form-pane" novalidate="1">
                  {{ method_field('PUT') }}
               {{ csrf_field() }}
               <input type="hidden" name="pid" value="{{ $vo->id }}" id="parentNodeId" />
                <div class="layui-form-item form-item-row form-item-field-parent_id form-item-nest_select form-item-group-basic  ">
                  <label class="layui-form-label">父级栏目：</label>
                  <div class="layui-input-inline">
                     <div class="menu_select">
                       <div class="menu_select_show">根节点</div>
                       <a href="javascript:void(0);" class="menu_select_action layui-btn  layui-btn-normal">重新选取</a>
                       <div class="menu_select_options sizing">
                         <div class="menu_option menu_option_level_0 menu_option_parent_0 ">
                           <a href="javascript:void(0);" class="each_nav_0 each_nav_1 same"  data-id="0"   data-parent="0">根节点</a>
                         </div>
                         <div class="menu_option menu_option_level_1 menu_option_parent_1 ">
                          @foreach($menus as $key => $menu)
                             <a href="javascript:void(0);" class="each_nav each_nav_{{ $key }} "  data-id="{{ $key }}" data-level="1"  data-parent="{{ $menu['pid'] }}">{{ $menu['title'] }}</a>
                          @endforeach
                       </div>
                       <div class="menu_option menu_option_level_2 hidden"></div>
                       <div class="menu_option menu_option_level_3 hidden"></div>
                     </div>
                   </div>
                 </div>
                </div>
                <div class="layui-form-item form-item-row form-item-field-title form-item-text form-item-group-basic  ">
                  <label class="layui-form-label">节点名称：</label>
                  <div class="layui-input-inline">
                     <input type="text" name="display_name" lay-verify="required" value="{{ $vo->display_name }}" id="display_name"  class="layui-input text-input form_item">
                  </div>
                </div>
                <div class="layui-form-item form-item-row form-item-field-controller form-item-select form-item-group-basic  ">
                  <label class="layui-form-label">控制器名：</label>
                  <div class="layui-input-inline">
                    <select name="controller" id="PowertreeController" lay-verify="required"  class="form_item" lay-search="" lay-filter="controller">
                      <option value="">≡请选择控制器名≡</option>
                      @foreach($controllers as $cname => $controller)
                        <option value="{{ $cname }}" @if(strtolower($cname)==$vo->controller) selected @endif  >{{ $controller }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="layui-form-item form-item-row form-item-field-action form-item-text form-item-group-basic  quick_row">
                   <label class="layui-form-label">方法名：</label>
                   <div class="layui-input-inline">
                    <input type="text" name="actions" value="{{ $vo->actions }}" lay-verify="required" id="actions"  class="layui-input text-input form_item">
                    <select name="" id=""   class="form_item quick_select_item" lay-search="" lay-filter="quick_select_item">
                        <option value="">≡快捷选项≡</option>
                        @foreach($actions as $ka => $action)
                            <option value="{{ $ka }}">{{ $action }}</option>
                        @endforeach
                    </select>
                   </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否菜单</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="is_menu" lay-filter="switchMenu" lay-skin="switch" @if($vo->is_menu==1) checked @endif  lay-text="是|否">
                    </div>
                </div>
                  <div class="layui-form-item">
                      <label class="layui-form-label">菜单图标</label>
                      <div class="layui-input-inline">
                          <input type="text" name="icon"  value="{{ $vo->icon }}" id="icon"  class="layui-input text-input form_item">
                      </div>
                  </div>
                <div class="layui-form-item form-item-row ">
                    <label class="layui-form-label">描述：</label>
                    <div class="layui-input-inline">
                        <textarea name="description" class="layui-textarea">{{ $vo->description }}</textarea>
                    </div>
                </div>
                <div class="layui-form-item form-item-row form-item-field-list_order form-item-number form-item-group-basic  ">
                   <label class="layui-form-label">排序权重：</label>
                   <div class="layui-input-inline">
                       <input type="number" name="sort"  value="{{ $vo->sort }}" id="sort"  class="layui-input text-input form_item">
                   </div>
                </div>
                 <div class="layui-form-item form-item-btns">
                            <div class="layui-input-inline">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="save" >立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                  </div>

               </form>
             </div>
         </div>
        </div>
        <div class="admin_bottom">

        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        var children = {!! json_encode($children) !!};
        var pids = {!! json_encode($pids) !!};
        layui.use(['form','element','layer','jquery'],function(){
            var $ = layui.$,
                form = layui.form,
                element = layui.element,
                layer = layui.layer;

                init_parent(pids);

                $('.menu_select_show,.menu_select_action').click(function(){
                    $(this).parent().find('.menu_select_options').stop().show()
                })
                $(".menu_select_options").on('mouseleave',function(){
                    $(this).hide();
                })
                $('.menu_select_options').on('click','a.each_nav',function(){
                     $(this).siblings().removeClass('same');
                     var level = $(this).data('level');
                     var next_level = level + 1;
                     var id = $(this).data('id');
                     var sub_menus = children[id];
                     $("#parentNodeId").val(id);
                     if(next_level==2){
                         $(".menu_option_level_3").hide().html("");
                     }
                     $(".menu_option_level_"+next_level).hide().html("");
                     if($(this).hasClass('same')){
                         $(this).removeClass('same');
                         set_parent_name();
                     }else{
                         $(this).addClass('same');
                         set_parent_name();
                         if(typeof sub_menu!='undefind' && sub_menus.length>0){
                             var _html ="";
                             for(var i=0;i<sub_menus.length;i++){
                                 _html +='<a href="javascript:void(0);" class="each_nav"  data-id="'+sub_menus[i].id+'"   data-level="'+next_level+'">'+sub_menus[i].display_name+'</a>'
                             }
                             $(".menu_option_level_"+next_level).html(_html).show();
                         }
                     }
                 })
                form.on('select(quick_select_item)', function(data){
                    $(data.elem).closest('.layui-input-inline').find('.form_item').val(data.value);
                })
                form.on('switch(switchMenu)',function(data){
                    console.log(data);
                })
                function set_parent_name(){
                    var parent_name ="根节点";
                    var parent_id = 0;
                    $(".each_nav.same").each(function(i,item){
                        parent_name += ">"+$(item).html();
                        parent_id = $(this).data('id');
                    })
                    $(".menu_select_show").html(parent_name);
                    $("#parentNodeId").val(parent_id);
                }

                function init_parent(pids){
                    for(var i=0;i<pids.length;i++){
                        if(pids[i]==0) continue;
                        $(".menu_option_level_"+i).find('.each_nav').removeClass('same');
                        $(".each_nav_"+pids[i]).addClass('same');
                        var sub_menus = children[pids[i]];
                        var next_level = i+1;
                        console.log(pids[i]);
                        if(typeof sub_menu!='undefind' && sub_menus.length>0){
                            var _html ="";
                            for(var j=0;j<sub_menus.length;j++){
                                _html +='<a href="javascript:void(0);" class="each_nav"  data-id="'+sub_menus[j].id+'"   data-level="'+next_level+'">'+sub_menus[j].display_name+'</a>'
                            }

                            $(".menu_option_level_"+next_level).html(_html).show();
                        }
                        $("a.each_nav[data-id="+pids[i]+"]").addClass('same');
                    }
                    set_parent_name();
                }
        })
    </script>
@endsection